<script setup lang="ts">


import {useSystemStore} from "@/stores/SystemStore.ts";
import {storeToRefs} from "pinia";

const systemStore = useSystemStore()
const {
  menu
} = storeToRefs(systemStore)

function clickMenu(menuString: string) {
  menu.value = menuString
}
</script>


<template>
  <div class="common-layout">
  <el-container>
    <el-aside class="aside web-app-region-drag">
      <div @click="clickMenu('消息')" class="aside-menu">
        <div style="background:white;width: 70%;height: 70%;"></div>
      </div>
      <router-link to="/chat">
        <div @click="clickMenu('消息')" class="aside-menu web-app-region-no-drag">
          <img v-if="menu == '消息'" src="@/assets/image/chat-click.png" alt="">
          <img v-else src="@/assets/image/chat-no-click.png" alt="">
        </div>
      </router-link>
      <router-link to="/friend">
        <div @click="clickMenu('好友')" class="aside-menu web-app-region-no-drag">
          <img v-if="menu == '好友'" src="@/assets/image/friend-click.png" alt="">
          <img v-else src="@/assets/image/friend-no-click.png" alt="">
        </div>
      </router-link>
      <router-link to="/collection">
        <div @click="clickMenu('收藏')" class="aside-menu web-app-region-no-drag">
          <img v-if="menu == '收藏'" src="@/assets/image/collection-click.png" alt="">
          <img v-else src="@/assets/image/collection-no-click.png" alt="">
        </div>
      </router-link>
    </el-aside>
    <el-container>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<style scoped>
.aside {
  background: #2e2e2e;
  height: 100vh;
  width: 55px;
  padding-top: 30px;
}

.aside-menu {
  height: 55px;
  width: 55px;
  margin-bottom: -5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aside-menu img {
  width: 23px;
  height: 23px;
}

.el-main{
  padding: 0;
}
</style>
